<!--
 * @Description: 学校排行榜
 * @Author: Li Yujie
 * @Date: 2021/1/22
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/1/22
-->
<template>
    <div class="wrapper">
        <!--筛选表单-->
        <div class="filter-view">
            <div class="header-new-box">
                <p class="header-new-box-title">参赛学校</p>
                <!--<el-input
                    v-model="filterData.school_name"
                    placeholder="请输入学校"
                    suffix-icon="el-icon-search"
                    size="medium"
                    clearable
                    @blur="getTableData(1)"
                    @keydown.enter.native="getTableData(1)"
                />-->
                <el-cascader
                    v-model="filterData.school_name"
                    placeholder="请选择学校"
                    :options="school_tree"
                    filterable
                    clearable
                    :show-all-levels="false"
                    size="medium"
                    change-on-select
                    expand-trigger="click"
                    @change="getTableData(1)"
                    @keyup.native.enter="getTableData(1)"
                    :props="{
                        label: 'name',
                        value: 'name',
                        children: 'children',
                    }"
                />
            </div>
            <div class="header-new-box">
                <el-button
                    type="primary"
                    size="small"
                    @click="getTableData(1)"
                >
                    查询
                </el-button>
            </div>
        </div>
        <!--/筛选表单-->
        <div class="series-view">
            统计时间：{{ start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }} - {{ end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
        </div>
        <!-- table -->
        <el-table
            :data="tableData"
            height="100%"
            style="width: 100%;"
            ref="tempLateName"
        >
            <el-table-column
                label="排名"
                prop="rank_index"
                width="80"
                align="center"
            />
            <el-table-column
                prop="school_name"
                label="参赛学校"
                show-overflow-tooltip
                align="left"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="apply_count"
                label="报名人数"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="invite_count"
                label="新增粉丝数"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="stuagent_count"
                label="邀请代理数"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="order_count"
                label="新增订单数"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="order_refund_count"
                label="退款订单"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="school_score"
                label="总分"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                prop="order_valid_count"
                label="榜单订单"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            />
            <el-table-column
                label="操作"
                show-overflow-tooltip
                align="center"
                :formatter="emptyFormatter"
            >
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="medium"
                        @click="getDialogData(1, scope.row)"
                    >
                        查看明细
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- /table -->

        <!-- /分页 -->
        <div class="pagination-wrapper clearfix">
            <el-pagination
                layout="total, prev, pager, next, jumper"
                background
                :current-page.sync="page.now_page"
                :total="page.total_count"
                :page-size="page.page_size"
                @current-change="getTableData"
            />
        </div>

        <el-dialog
            title="查看明细"
            :visible.sync="detailDialog"
            width="1100px"
            :close-on-click-modal="false"
        >
            <el-table
                :data="dialogTable"
            >
                <el-table-column
                    label="校内排名"
                    prop="rank_index"
                    width="80"
                    align="center"
                />
                <el-table-column
                    label="用户信息"
                    show-overflow-tooltip
                    align="left"
                    :formatter="emptyFormatter"
                    width="200"
                >
                    <template slot-scope="scope">
                        <div>昵称：{{ scope.row.true_name }}</div>
                        <div>手机号：{{ scope.row.phone }}</div>
                        <div>用户编号：{{ scope.row.student_no }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="精英等级"
                    show-overflow-tooltip
                    align="center"
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        <div v-if="scope.row.agent_level !== -1">E{{ scope.row.agent_level }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="新增粉丝数"
                    show-overflow-tooltip
                    align="center"
                    width="150"
                >
                    <template slot-scope="scope">
                        {{ scope.row.invite_count }}{{ `（${scope.row.invite_score}分）` }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="stuagent_count"
                    label="邀请代理数"
                    show-overflow-tooltip
                    align="center"
                    width="150"
                >
                    <template slot-scope="scope">
                        {{ scope.row.stuagent_count }}{{ `（${scope.row.stuagent_score}分）` }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_count"
                    label="新增订单数"
                    show-overflow-tooltip
                    align="center"
                    width="150"
                >
                    <template slot-scope="scope">
                        {{ scope.row.order_count }}{{ `（${scope.row.order_valid_score}分）` }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="order_refund_count"
                    label="退款订单"
                    show-overflow-tooltip
                    align="center"
                />
                <el-table-column
                    prop="student_score"
                    label="总分"
                    show-overflow-tooltip
                    align="center"
                />
                <el-table-column
                    label="占比"
                    show-overflow-tooltip
                    align="center"
                    :formatter="emptyFormatter"
                >
                    <template slot-scope="scope">
                        <div v-if="school_score">
                            {{ ((Number(scope.row.student_score) / school_score) * 100).toFixed(2) }}%
                        </div>
                        <div v-else>--</div>
                    </template>

                </el-table-column>
            </el-table>
            <div
                class="pagination-wrapper clearfix"
                style="margin-bottom: 24px"
            >
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="dialogPage.now_page"
                    :total="dialogPage.total_count"
                    :page-size="dialogPage.page_size"
                    @current-change="getDialogData"
                />
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "SchoolRank",
    data() {
        return {
            filterData: {
                keyword: '',
                school_name: [],
                agent_level: '',
                type: '1',
            },
            seriesList: [],
            tableData: [],
            dialogTable: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            dialogPage: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            detailDialog: false,
            start_time: '',
            end_time: '',
            school_score: '',
            school_tree: []
        };
    },
    filters: {},
    mounted() {
        this.getSeriesList();
        this.getSchoolTree();
    },
    methods: {

        /**
         * @description 获取省/市/学校三级联动
         */
        getSchoolTree () {
            this.$post('/student/local_info%5Cschool_tree',{},resp => {
                if (resp.code === 1) {
                    this.school_tree = resp.data.tree;
                }
            });
        },

        /**
         * 获取排期列表
         */
        getSeriesList() {
            this.$post('/student/pk%5Cget_series_list', {}, resp => {
                if (resp.code === 1) {
                    this.seriesList = [...resp.data.list];
                    this.start_time = this.seriesList[0].start_time;
                    this.end_time = this.seriesList[this.seriesList.length - 1].end_time;
                    this.getTableData();
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },
        /**
         * 获取表格数据
         * @param page
         */
        getTableData(page) {
            let params = {...this.filterData};

            params.page_id = page || this.page.now_page;
            params.school_name = params.school_name.length > 0 ? params.school_name[2]: '';

            this.$post('/student/pk%5Cget_school_rank', params, resp => {
                if (resp.code === 1) {
                    this.tableData = resp.data.list;
                    this.page = resp.data.page;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
        /**
         * 获取详细数据
         * @param page
         * @param row
         */
        getDialogData(page, row) {
            this.detailDialog = true;
            let params = {
                page_id: page || this.dialogPage.now_page,
                school_id: row.school_id
            };

            this.$post('/student/pk%5Cget_score_rank', params, resp => {
                if (resp.code === 1) {
                    this.dialogTable = resp.data.list;
                    this.dialogPage = resp.data.page;
                    this.school_score = Number(row.school_score);
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    display: flex;
    height: calc(100% - 24px);
    width: calc(100% - 48px);
    flex-direction: column;
    position: relative;
    margin: 0 24px 24px;
    background: #fff;
    box-sizing: border-box;

    /*筛选*/
    .filter-view {
        margin-top: 6px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

        .header-new-box {
            display: flex;
            align-items: center;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            white-space: nowrap;
            margin-right: 24px;
            margin-bottom: 24px;

            &-title {
                margin-right: 16px;
                white-space: nowrap;
            }
        }

        .input-with-select {
            width: 300px;
            margin-right: 32px;
        }

        /deep/ .input-with-select .el-input-group__prepend {
            background-color: #fff;
            width: 130px;
        }
    }

    /* 分页 */
    .pagination-wrapper {
        padding: 10px 32px;

        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }

    /deep/ .el-tabs {
        height: 50px!important;
        .el-tabs__header {
            margin-bottom: 0!important;
        }
        .el-tabs__nav-wrap {
            height: 50px!important;
            padding-left: 0!important;

            .el-tabs__nav-scroll {
                .el-tabs__nav {
                    height: 50px!important;
                    line-height: 50px!important;
                }
            }
        }
    }
    .series-view {
        margin-bottom: 12px;
        margin-top: -20px;
        text-align: right;
    }

    /deep/ .el-dialog {
        margin-top: 15vh !important;

        .el-dialog__header {
            padding-top: 10px;
            box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;

            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }

            .el-icon-close:before {
                color: rgb(194, 194, 194);
                font-size: 17px;
                font-weight: bold;
            }

            .el-dialog__headerbtn {
                top: 14px;
            }
        }

        .el-dialog__body {
            padding: 24px 24px 0;
            max-height: 500px;
            overflow-y: auto;
        }

        .el-textarea__inner {
            resize: none;
        }

        .el-dialog__footer {
            text-align: center;
            padding-bottom: 30px;
            margin-top: 6px;
        }
    }
}
</style>
